<script setup lang="ts">
import router from "@/router";
import {Message,User,Warning } from '@element-plus/icons-vue'
import { userInfoStore } from "@/store/userInfo";
import { countStore } from "@/store/count";

interface user{
      name: string,
      email: string
}
const  props:any =defineProps(["count"])
const user =userInfoStore().userInfo.LoginUser
const onBack = () => {
  router.go(-1)
}
console.log(props.count);
</script>

<template>
<div class="userInfo">
  <div class="header">
    <div>
      <el-avatar size="large" :src="user.avatar" />
    </div>
    <div>
      <el-statistic :value="countStore().count">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            collects video  count
            <el-tooltip
              effect="dark"
              content="Number of collects "
              placement="top"
            >
              <el-icon style="margin-left: 4px" :size="12">
                <Warning />
              </el-icon>
            </el-tooltip>
          </div>
        </template>
      </el-statistic>
    </div>
    <div>
      <el-text  class="mx-1" type="primary">
        <el-icon>
          <User />
        </el-icon>
        {{user.name}}
      </el-text>
      <br>
      <el-text class="mx-1" type="primary">
        <el-icon>
          <Message />
        </el-icon>
        {{user.email}}
      </el-text>
    </div>

  </div>
  <div class="main">
    <div class="left">
      <ul>
        <li @click="router.push('modifyInfo')">重置密码</li>
        <li @click="router.push('checkInfo')">查看信息</li>
        <li @click="router.push('collects')">收藏信息</li>
      </ul>
    </div>
    <div class="right">
       <div class="right-bg"></div>
       <RouterView></RouterView>
    </div>
  </div>

</div>
</template>

<style scoped>
.userInfo{
  width: 100%;
  height: 90%;
}
.header{
   margin: 20px 0;
   width: 100%;
   height: 15%;
   display: flex;
   align-items: center;
}
.header> div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.header > div {
  flex: 1;
  text-align: center;
}
.header{
  background-color: floralwhite;
  box-shadow: 2px 2px 3px #ccc;
  border-radius: 20px;
}
.right-bg{
  width: 100%;
  height: 100%;
  background-color: floralwhite;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.right{
  position: relative;
  background-color: transparent;
  width: 190%;
  height: 100%;
}
.left{
  margin-right: 20px ;
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.main{
  display: flex;
  width: 100%;
  height: 80%;
}
.mx-1{
    font-style: italic;
    font-size: 20px;
    font-weight: bold;
}
ul{
  margin: 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #578aef;
  border-radius: 20px;
}
li{
  width: 100%;
  height: 50px;
  list-style: none;
  text-align: center;
  line-height: 50px;
  border-radius: 20px;
  cursor: pointer;
}
li:hover{
  background-color: #ddefbb;
}
a{
  width: 200px;
  text-decoration: none;
}
</style>